<template>
  <div style="position: relative;">
    <div style="position: absolute;width:100%;height:100px;z-index: 999999999">
      <a class="button" @dblclick="add">add</a>
      <a class="button" @dblclick="del">del</a>
      <a class="button" @dblclick="hand">手</a>
      <a class="button" @dblclick="copy">复制</a>
      <a class="button" @dblclick="paste">粘贴</a>
      <a class="button" @click="query">查询状态</a>
    </div>

    <div style="background: #2c3e50;position: relative;width:100%;height:600px;">

      <KityMinder
        :importData='importDate'
        :template="template"
        :theme="theme"
        :cmd="cmd"
        v-on:listenToChildEvent="lishenChildEvent"
        v-on:listenToQueryEvent="listenToQueryEvent"
        v-on:listenToSelectionEvent="listenToSelectionEvent"
      />

    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      importDate: [
        {
          "data": {"text": "11","parent":-1, "id": 11, "priority": 1},
          "children": [
            {
              "data": {"text": "22","parent":11, "id": 22, "priority": 1},
              "children": [
                {"data": {"text": "33","parent":22, "id": 33, "priority": 1}},
              ]
            },
            {"data": {"text": "44","parent":11, "id": 44, "priority": 1}},
          ]
        },

      ],
      theme: 'snow',
      template: 'fish-bone',
      cmd:'',
      maxId:0
    }
  },
  components: {
    KityMinder: () => import('../components/vueKityminder')
  },
  methods:{
    add(){
      this.maxId++
      this.cmd={
        "cmd":"AppendChildNode",
        "type":"dbClick",
        "data":{
          "id":this.maxId,
          "text":"hello",
          "tagId":1
        },
        "random":Math.round(Math.random()*10)
      }
    },
    del(){
      this.cmd={
        "cmd":'RemoveNode',
        "type":"single",
        "random":Math.round(Math.random()*10)
      }
    },
    hand(){
      this.cmd={
        "cmd":'Hand',
        "type":"single",
        "random":Math.round(Math.random()*10)
      }
    },
    copy(){
      this.cmd={
        "cmd":'Copy',
        "type":"single",
        "random":Math.round(Math.random()*10)
      }
      console.log("复制了")
    },
    paste(){
      this.cmd={
        "cmd":'Paste',
        "type":"single",
        "random":Math.round(Math.random()*10)
      }
      console.log("粘贴了")
    },

    query(){
      this.cmd={
        "cmd":'QuerySelect',
        "type":"single",
        "random":Math.round(Math.random()*10)
      }
      console.log("查询一下选中状态：")
    },

    lishenChildEvent(data){
      console.log("接收到子组件的数据：")
      console.log(data)
    },
    listenToSelectionEvent(data){
      console.log("当前选中的节点信息：")
      console.log(data)
      if(data[0].root.data.id>this.maxId)
        this.maxId=data[0].root.data.id
      this.getMaxId(data[0].root.children)
      console.log("maxid:"+this.maxId)
    },
    getMaxId(nodes){
      if(nodes.length>0){
        for(let i=0;i<nodes.length;i++){
          if(nodes[i].data.id>this.maxId)
            this.maxId=nodes[i].data.id
          this.getMaxId(nodes[i].children)
        }
      }
    },
    listenToQueryEvent(data){
      console.log("当前选中的节点情况：")
      console.log(data)
      //生成新的最大值ID：

    },

    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
  }
}
</script>
<style>
.button{
  width: 80px;
  height:18px;
  background: #7c3e50;
  color:#fff;
  padding:15px;
  display: block;
  float: left;
  margin-left:10px;
  margin-top:10px;
}
</style>
